<template>
  <div class="home">
  <router-link to="/about">
    <button @click="abc">添加笔记</button>
  </router-link>
    <button>取消</button>
    <div>
      <input type="text" class="h1" v-model="data.m1" /><h2>{{ data.m1 }}</h2>
      <br />
      <textarea class="h2" v-model="data.m2"></textarea><h2>{{ data.m2 }}</h2>
<!-- <input type="text" class="h1" v-model="m1">
<textarea class="h2" v-model="m2"></textarea> -->

    </div>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { reactive } from "vue";
export default {
  setup(props, context) {
        const store = useStore() 
    const data = reactive({
      m1: "",
      m2: "",
    }); 
    function abc() {
      store.commit("sss", {
        input1: data.m1,
        Text: data.m2,
      });
    } 

    return {
      data,
      abc
    };
  },

// data(){
//   return {
//     m1:'',
//     m2:''
//   }
// },

// methods:{
//   abc(){
//       this.$store.commit("sss", {
//         input1: this.m1,
//         Text: this.m2,
//       });
//   }
// }



};
</script>
<style>
.h1 {
  width: 600px;
  height: 100px;
  border: 1px solid #000;
}
.h2 {
  width: 600px;
  height: 400px;
}
</style>